<template>
  <div style="margin-top: 10px">
    <!--  表格  -->
    <el-table
        :data="competitionPrizes"
        stripe
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号"
          width="60">
      </el-table-column>
      <el-table-column
          prop="name"
          label="竞赛名称"
          width="300">
      </el-table-column>
      <el-table-column
          prop="level"
          label="竞赛级别">
      </el-table-column>
      <el-table-column
          prop="prize"
          label="竞赛奖项">
      </el-table-column>
      <el-table-column
          prop="members"
          label="团队成员">
      </el-table-column>
      <el-table-column
          prop="teacher"
          label="指导教师">
      </el-table-column>
      <el-table-column
          prop="time"
          label="比赛时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          width="200"
          label="操作">
        <template slot-scope="scope" v-if="userId === scope.row.userId || roleId === 1">
          <el-button @click="showCompetitionPrize(scope.row)" type="primary">编辑
          </el-button>

          <el-button type="danger" @click="deleteCompetitionPrize(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页  -->
    <div style="float:right;;margin-top: 10px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!-- 编辑框，默认关闭 -->
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="80%">
      <div>
        <el-form :model="competitionPrize" >
          <el-row>
            <el-col :span="8">
              <div style="display: flex">
                <el-form-item label="竞赛名称:">
                  <el-input size="small" clearable v-model="competitionPrize.name" placeholder="请输入竞赛名称"
                            prefix-icon="el-icon-edit"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="display: flex">
                <el-form-item label="竞赛级别:">
                  <el-input size="small" clearable v-model="competitionPrize.level" placeholder="如：校级，省级"
                            prefix-icon="el-icon-edit"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="display: flex">
                <el-form-item label="竞赛奖项:">
                  <el-input size="small" clearable v-model="competitionPrize.prize" placeholder="如：校级一等奖"
                            prefix-icon="el-icon-edit"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div style="display: flex">
                <el-form-item label="团队成员:">
                  <el-input size="small" clearable v-model="competitionPrize.members" placeholder="有多个成员直接输入"
                            prefix-icon="el-icon-edit"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="display: flex">
                <el-form-item label="指导教师:">
                  <el-input size="small" clearable v-model="competitionPrize.teacher" placeholder="如：李丹"
                            prefix-icon="el-icon-edit"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div style="display: flex">
                <el-form-item label="竞赛时间:">
                  <el-input size="small" clearable v-model="competitionPrize.time" placeholder="如：2020.05"
                            prefix-icon="el-icon-edit"/>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCompetitionPrizeAddBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CompetitionPrizeTable",
  // 从父类传过来的数据
  props: {
    query: {
      default: () => {
        return {
          stuName: '',
          name: ''
        }
      }
    }
  },
  data() {
    return {
      competitionPrizes: [],
      // 数据总条数
      total: 0,
      size: 10,
      page: 1,
      userId: JSON.parse(sessionStorage.getItem("user")).id,
      roleId: JSON.parse(sessionStorage.getItem("user")).roles[0].id,
      // 用于保存更新时用的数据
      dialogVisible: false, //是否可见
      title: '',
      competitionPrize: {
        id: '',
        userId: '',
        name: '',
        level: '',
        prize: '',
        members: '',
        teacher: '',
        time: ''
      }
    }
  },
  methods: {
    getCompetitionPrizeData() {
      const url = '/studentInfo/competitionPrize?'+'page='+this.page+'&size='+this.size+'&stuName='+this.query.stuName
      +'&name='+this.query.name;
      this.getRequest(url).then(resp => {
        if (resp) {
          this.competitionPrizes = resp.data;
          this.total = resp.total;
        }
      })
    },
    deleteCompetitionPrize(data) {
      this.$confirm('此操作将永久删除[' + data.name + ']这条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/studentInfo/competitionPrize/' + parseInt(data.id)).then(rep => {
          if (rep) {
            this.getCompetitionPrizeData();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /**
     * 点击
     */
    handleCompetitionPrizeAddBtn() {
      this.putRequest("/studentInfo/competitionPrize", this.competitionPrize).then(resp=> {
        this.dialogVisible = false;
        this.getCompetitionPrizeData();
      });
    },
    /**
     *  打开编辑窗口
     **/
    showCompetitionPrize(data) {
      this.competitionPrize = JSON.parse(JSON.stringify(data));
      this.dialogVisible = true;
    },
    /**
     * 一页显示数据量变化触发事件
     */
    handleSizeChange(val) {
      this.size = val;
      this.getCompetitionPrizeData();
    },
    /**
     * 页码发生变化
     */
    handleCurrentChange(val) {
      this.page = val;
      this.getCompetitionPrizeData();
    }
  },
  mounted() {
    this.getCompetitionPrizeData();
  }
}
</script>

<style scoped>

</style>